<template>
  <div class="charts">
    <p class="title">
      <span>绿色科学城市</span><span>北外滩绿色科学城市关键指标</span
      ><span>统计时间：2023-09-10</span>
    </p>
    <div class="chart-container">
      <div class="flex-column">
        <Card
          title="能源"
          :style="{
            paddingBottom: 0,
            flex: 'none',
          }"
        >
          <div class="extra"><img src="@/static/image/no7.png" /></div>
          <div class="progress-container">
            <div class="progress">
              <a-progress :percent="90" v-bind="progressProps" :width="80" />
              <p>可再生能源占全社会用电量比重</p>
            </div>
            <div class="progress">
              <a-progress :percent="90" v-bind="progressProps" :width="80" />
              <p>单位GDP能耗</p>
            </div>
          </div>
        </Card>
        <Card
          title="绿色交通"
          :style="{
            paddingBottom: 0,
            flex: 'none',
          }"
        >
          <div class="extra">
            <img src="@/static/image/no7.png" /><img
              src="@/static/image/no11.png"
            />
          </div>
          <div class="progress-container">
            <div class="progress">
              <a-progress :percent="90" v-bind="progressProps" :width="80" />
              <p>绿色交通出行分担率</p>
            </div>
            <div class="progress">
              <a-progress :percent="90" v-bind="progressProps" :width="80" />
              <p>轨道站点600米覆盖率</p>
            </div>
            <div class="progress">
              <a-progress :percent="90" v-bind="progressProps" :width="80" />
              <p>公交站点500米覆盖率</p>
            </div>
            <div class="progress">
              <a-progress :percent="90" v-bind="progressProps" :width="80" />
              <p>清洁能源公交比例(%)</p>
            </div>
          </div>
        </Card>
        <Card title="水">
          <div class="extra">
            <img src="@/static/image/no6.png" />
          </div>
          <Chart :options="getWaterOptions()"
        /></Card>
      </div>
      <div class="flex-column column-center">
        <div class="project-desc">项目介绍</div>
        <img src="@/static/image/map.png" class="map" />
        <div class="center-row">
          <Card title="评估结果" no-border
            ><Chart :options="getForecastOptions()"
          /></Card>
          <Card title="潜在绿色项目占比" no-border
            ><Chart :options="getGreenOptions()"
          /></Card>
        </div>
      </div>
      <div class="flex-column">
        <Card title="固废">
          <div class="extra">
            <img src="@/static/image/no11.png" />
          </div>
          <Chart :options="getSolidWasteOptions()"
        /></Card>
        <Card title="生态环境">
          <div class="extra">
            <img src="@/static/image/no6.png" />
            <img src="@/static/image/no11.png" />
          </div>
          <Chart :options="getEcotopeOptions()"
        /></Card>
        <Card title="建筑">
          <div class="extra">
            <img src="@/static/image/no7.png" />
          </div>
          <Chart :options="getBuildOptions()"
        /></Card>
        <Card title="韧性">
          <div class="extra">
            <img src="@/static/image/no13.png" />
          </div>
          <Chart :options="getToughnessOptions()"
        /></Card>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  getWaterOptions,
  getForecastOptions,
  getGreenOptions,
  getSolidWasteOptions,
  getToughnessOptions,
  getEcotopeOptions,
  getBuildOptions,
} from "./config";
import Card from "./Card.vue";
import Chart from "@/components/Chart.vue";
const progressProps = {
  type: "circle",
  strokeColor: {
    "0%": "rgba(6,221,141,1)",
    "100%": "rgba(6,221,141,0.2)",
  },
  strokeWidth: 10,
};
</script>
<style lang="scss" scoped>
.charts {
  padding: 16px;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  background-color: #fff;
}
.title {
  flex: none;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
  & > span:first-of-type {
    float: left;
  }
  & > span:last-of-type {
    float: right;
    font-size: 18px;
  }
}
.chart-container {
  display: flex;
  flex-flow: row nowrap;
  flex: 1;
  height: 0;
  & > * {
    flex: 1;
    margin-right: 16px;
    &:last-of-type {
      margin-right: 0;
    }
    & > * {
      flex: 1;
      margin-top: 0;
      margin-right: 0;
      margin-left: 0;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}
.flex-column {
  display: flex;
  flex-flow: column nowrap;
}
.column-center {
  width: 45vw;
  flex: none;
}
.progress-container {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  font-size: 14px;
  & > * {
    width: 50%;
    & > p {
      margin: 8px 0 16px;
    }
  }
}
.map {
  box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f,
    0 5px 12px 4px #00000017;
  flex: 3;
  height: 0;
  object-fit: contain;
  background-color: #fff;
}
.center-row {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  flex: 2;
  height: 0;
  background-color: #fff;
  box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f,
    0 5px 12px 4px #00000017;
  margin: 16px 0;
  & > * {
    flex: 1;
    margin: 0;
  }
}
.project-desc {
  background-color: #fff;
  box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f,
    0 5px 12px 4px #00000017;
  flex: none;
  height: 150px;
  padding: 16px;
  margin-bottom: 16px;
}
.extra {
  position: absolute;
  right: 8px;
  top: 8px;
  height: 30px;
  & > * {
    height: 100%;
    margin-left: 8px;
  }
}
</style>
